<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog-Z Photo Detail Page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<!-- Page Loader -->
<div id="header"></div>
<!--细节-->
<div class="container-fluid tm-container-content tm-mt-60">
    <div class="row mb-4">
        <h2 class="col-12 tm-text-primary" id="pictruemsg">Photos</h2>
    </div>
    <div class="row tm-mb-90" id="img_loader">
        <!--<div class="col-xl-8 col-lg-7 col-md-6 col-sm-12">
            <img src="image/11.jpg" alt="Image" class="img-fluid">
        </div>
        <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12">
            <div class="tm-bg-gray tm-video-details">
                <div id="">
                    <img src="image/11.jpg" width="100%">
                    <div class="mb-4 d-flex flex-wrap">
                        <div class="mr-4 mb-2">
                            <span style="text-align: center" class="tm-text-gray-dark">作者: </span><span
                                class="tm-text-primary">a</span>
                        </div>
                        <div class="mr-4 mb-2">
                            <span class="tm-text-gray-dark">联系方式: </span><span class="tm-text-primary">111</span>
                        </div>
                    </div>
                </div>
                <div class="mb-4 d-flex flex-wrap">
                    <div class="mr-4 mb-2">
                        <span style="text-align: center" class="tm-text-gray-dark">Dimension: </span><span
                            class="tm-text-primary">1920x1080</span>
                    </div>
                    <div class="mr-4 mb-2">
                        <span class="tm-text-gray-dark">Format: </span><span class="tm-text-primary">JPG</span>
                    </div>
                </div>
                <div class="text-center mb-5">
                    <a href="#" class="btn btn-primary tm-btn-big">Download</a>
                </div>
                <div class="text-center mb-5">
                    <a id="favoriteBtn" onclick="favorite()" class="btn btn-primary tm-btn-big">加入收藏</a>
                </div>
                <div>
                    <h3 class="tm-text-gray-dark mb-3">Tags</h3>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Cloud</a>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Bluesky</a>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Nature</a>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Background</a>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Timelapse</a>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Night</a>
                    <a href="#" class="tm-text-primary mr-4 mb-2 d-inline-block">Real Estate</a>
                </div>
            </div>
        </div>-->
    </div>
    <div class="comments">
        <div id="title" class="comments__title">
            <h4>Comments</h4>
            <span>5</span>
        </div>

        <ul id="showComment" class="comments__list">
            <li class="comments__item">
                <div class="comments__autor">
                    <img class="comments__avatar" src="img/avatar.svg" alt="">
                    <span class="comments__name">John Doe</span>
                    <span class="comments__time">30.08.2021, 17:53</span>
                    <button id="delete">删除评论</button>
                </div>
                <p class="comments__text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
                <div class="comments__actions">
                    <div class="comments__rate">
                        <button id="supportBtn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"></path></svg> 12</button>

                        <button type="button">7 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H8a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Z"></path></svg></button>
                    </div>

                    <button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.707,11.293l-8-8A.99991.99991,0,0,0,12,4V7.54492A11.01525,11.01525,0,0,0,2,18.5V20a1,1,0,0,0,1.78418.62061,11.45625,11.45625,0,0,1,7.88672-4.04932c.0498-.00635.1748-.01611.3291-.02588V20a.99991.99991,0,0,0,1.707.707l8-8A.99962.99962,0,0,0,21.707,11.293ZM14,17.58594V15.5a.99974.99974,0,0,0-1-1c-.25488,0-1.2959.04932-1.56152.085A14.00507,14.00507,0,0,0,4.05176,17.5332,9.01266,9.01266,0,0,1,13,9.5a.99974.99974,0,0,0,1-1V6.41406L19.58594,12Z"></path></svg><span>Reply</span></button>
                    <button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,14a1,1,0,0,0-1.22.72A7,7,0,0,1,11,20H5.41l.64-.63a1,1,0,0,0,0-1.41A7,7,0,0,1,9.25,6.22a1,1,0,0,0-.5-1.94A9,9,0,0,0,4,18.62L2.29,20.29a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,22h8a9,9,0,0,0,8.72-6.75A1,1,0,0,0,19,14ZM21,2a1,1,0,0,0-1,1h0a5,5,0,1,0,.3,7.75A1,1,0,1,0,19,9.25,3,3,0,1,1,17,4a3,3,0,0,1,2.23,1H18a1,1,0,0,0,0,2h3a1,1,0,0,0,1-1V3A1,1,0,0,0,21,2Z"></path></svg><span>Quote</span></button>
                </div>
            </li>
        </ul>

        <form id="addComment" action="#" class="comments__form">
            <div class="sign__group">
                <textarea id="commText" style="" name="text" class="sign__textarea" placeholder="添加评论"></textarea>
            </div>

            <input onclick="addComment()" value="send" type="button" class="sign__btn"/>
        </form>
    </div>
    <!-- 相关图片-->
    <div class="row mb-4">
        <h2 class="col-12 tm-text-primary">
            Related Photos
        </h2>
    </div>
    <div class="row mb-3 tm-gallery" id="relatedphotos">
        <!-- <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-01.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Hangers</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">16 Oct 2020</span>
                 <span>12,460 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-02.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Perfumes</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">12 Oct 2020</span>
                 <span>11,402 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-03.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Clocks</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">8 Oct 2020</span>
                 <span>9,906 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-04.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Plants</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">6 Oct 2020</span>
                 <span>16,100 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-05.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Morning</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">26 Sep 2020</span>
                 <span>16,008 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-06.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Pinky</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">22 Sep 2020</span>
                 <span>12,860 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-07.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Bus</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">12 Sep 2020</span>
                 <span>10,900 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-08.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>New York</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">4 Sep 2020</span>
                 <span>11,300 views</span>
             </div>
         </div>-->
    </div>

</div> <!-- container-fluid, tm-container-content -->

<!--尾部-->
<div id="footer"></div>

<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script type="text/javascript" src="js/getParameter.js"></script>
<script src="js/plugins.js"></script>
<script>
    $(window).on("load", function () {
        $('body').addClass('loaded');
    })
    $(function () {
        $.get("header.html", function (data) {
            $("#header").html(data);
        });
        $.get("footer.html", function (data) {
            $("#footer").html(data);
        });
        var iid = getParameter("iid");
        //图片细节
        $.get("/photograph/photo/imgDetail", {iid: iid},
            function (data) {
                $("#pictruemsg").html(data.iname)
                var divmsg = '';
                divmsg += ' <div class="col-xl-8 col-lg-7 col-md-6 col-sm-12">\n' +
                    '            <img src="' + data.isrc + '" alt="Image" class="img-fluid">\n' +
                    '        </div>\n' +
                    '        <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12">\n' +
                    '            <div class="tm-bg-gray tm-video-details">\n' +
                    '                <div id="">\n' +
                    '                    <img src="' + data.isrc + '" width="100%">\n' +
                    '                    <div class="mb-4 d-flex flex-wrap">\n' +
                    '                        <div class="mr-4 mb-2">\n' +
                    '                            <span style="text-align: center" class="tm-text-gray-dark">作者: </span><span\n' +
                    '                                class="tm-text-primary">' + data.author.aname + '</span>\n' +
                    '                        </div>\n' +
                    '                        <div class="mr-4 mb-2">\n' +
                    '                            <span class="tm-text-gray-dark">联系方式: </span><span class="tm-text-primary">' + data.author.telephone + '</span>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '                <div class="mb-4 d-flex flex-wrap">\n' +
                    '                    <div class="mr-4 mb-2">\n' +
                    '                        <span style="text-align: center" class="tm-text-gray-dark">Dimension: </span><span\n' +
                    '                            class="tm-text-primary">' + data.isize + '</span>\n' +
                    '                    </div>\n' +
                    '                    <div class="mr-4 mb-2">\n' +
                    '                        <span class="tm-text-gray-dark">Format: </span><span class="tm-text-primary">JPG</span>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '                <div class="text-center mb-5">\n' +
                    '                    <a  href="/photograph/photo/downloadfile?filename=' + data.isrc + '" class="btn btn-primary tm-btn-big">Download</a>\n' +
                    '                </div>\n' +
                    '                <div class="text-center mb-5">\n' +
                    '                    <a href="javascript:void(0);" id="favoriteBtn" onclick="favorite()" class="btn btn-primary tm-btn-big">加入收藏</a>\n' +
                    '                </div>\n' +
                    '<span class="tm-text-gray-dark">被收藏次数: </span><span class="tm-text-primary" id="collection">0</span>\n' +
                    '                <div>\n' +
                    '                    <h3 class="tm-text-gray-dark mb-3">Tags</h3>\n';
                for (var i = 0; i < data.itag.split("/").length; i++) {
                    divmsg += '<a href="search.html?iname=' + data.itag.split("/")[i] + '" class="tm-text-primary mr-4 mb-2 d-inline-block">' + data.itag.split("/")[i] + '</a>';
                }
                divmsg += ' </div>\n' +
                    '            </div>\n' +
                    '        </div>'
                $("#img_loader").html(divmsg);
            }, "json")

        // 加载图片是否被收藏
        $.get("/photograph/photo/isFavorite",
            {iid: iid},
            function (data) {
                // 更新收藏按钮的状态
                $favoriteBtn = $("#favoriteBtn");
                if (data.flag) {
                    // 改变按钮样式
                    $favoriteBtn.addClass("already");
                    // 改变按钮的内容
                    $favoriteBtn.html('<i class="glyphicon glyphicon-heart-empty"></i>取消收藏');
                    // 改变按钮的功能
                    $favoriteBtn.attr("onclick", "cancelFavorite()");
                }
            }, "json");

        //被收藏次数
        $.get("/photograph/photo/favoriteCount", {iid: iid}, function (data) {
            $("#collection").html(data);
        }, "json")

        //相关照片
        $.get("/photograph/CategoryServlet/relateImg", {iid: iid},
            function (data) {
                $relatedphotos = $("#relatedphotos");
                var list = '';
                for (var i = 0; i < data.length; i++) {
                    var li = ' <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data[i].iname + '</h2>\n' +
                        '                    <a onclick="reading(' + data[i].iid + ')" href="photo-detail.html?iid=' + data[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data[i].idate + '</span>\n' +
                        '                <span>' + data[i].iclick + ' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    list += li;
                }
                $relatedphotos.html(list);
            }, "json")

        $.post("/photograph/photo/showComment",{iid:iid},
            function (data) {
                // alert(data.text)
                // alert(data[0].user.name)
                var comList=''
                for (var i = 0; i < data.length; i++) {
                    comList += '<li class="comments__item">\n' +
                        '                <div class="comments__autor">\n' +
                        '                    <img class="comments__avatar" src="img/userPhoto.jpeg" alt="">'
                    comList += '<span class="comments__name">'+ data[i].user.name +'</span>\n' +
                        '                    <span class="comments__time">'+ data[i].time +'</span>\n' +
                            '<button onclick="deleteCom('+ data[i].comid +','+ data[i].uid +')" style="position: absolute;\n' +
                        'right: 10px;\n' +
                        'top: 4px;\n' +
                        'color: gray;">删除评论</button>' +
                        '                </div>\n' +
                        '                <p class="comments__text">'+ data[i].text +'</p>\n' +
                        '                <div class="comments__actions">\n' +
                        '                    <div id="support" class="comments__rate">\n' +
                        '                        <button id="supportBtn" onclick="addSupporting('+ data[i].comid +')" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"></path></svg><span id="countSupp">'+ data[i].support +'</span> </button>\n' +
                        '\n' +
                        '                        <button id="nonsupportBtn" onclick="addNonSupporting('+ data[i].comid +')" type="button"><span id="countNon">'+ data[i].nonsupport +'</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H8a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Z"></path></svg></button>\n' +
                        '                    </div>\n' +
                        '                    <button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.707,11.293l-8-8A.99991.99991,0,0,0,12,4V7.54492A11.01525,11.01525,0,0,0,2,18.5V20a1,1,0,0,0,1.78418.62061,11.45625,11.45625,0,0,1,7.88672-4.04932c.0498-.00635.1748-.01611.3291-.02588V20a.99991.99991,0,0,0,1.707.707l8-8A.99962.99962,0,0,0,21.707,11.293ZM14,17.58594V15.5a.99974.99974,0,0,0-1-1c-.25488,0-1.2959.04932-1.56152.085A14.00507,14.00507,0,0,0,4.05176,17.5332,9.01266,9.01266,0,0,1,13,9.5a.99974.99974,0,0,0,1-1V6.41406L19.58594,12Z"></path></svg><span>Reply</span></button>\n' +
                        '                    <button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,14a1,1,0,0,0-1.22.72A7,7,0,0,1,11,20H5.41l.64-.63a1,1,0,0,0,0-1.41A7,7,0,0,1,9.25,6.22a1,1,0,0,0-.5-1.94A9,9,0,0,0,4,18.62L2.29,20.29a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,22h8a9,9,0,0,0,8.72-6.75A1,1,0,0,0,19,14ZM21,2a1,1,0,0,0-1,1h0a5,5,0,1,0,.3,7.75A1,1,0,1,0,19,9.25,3,3,0,1,1,17,4a3,3,0,0,1,2.23,1H18a1,1,0,0,0,0,2h3a1,1,0,0,0,1-1V3A1,1,0,0,0,21,2Z"></path></svg><span>Quote</span></button>\n' +
                        '                </div>\n' +
                        '            </li>'
                }
                $("#showComment").html(comList)
        },"json")

        $.post("/photograph/photo/countComment",{iid:iid},function (data) {
            $("#title").html('<h4>Comments</h4>\n' +
                '            <span>'+ data +'</span>')
        },"json")

    });

    //加点击数
    function reading(iid) {
        $.post("/photograph/read/reading", {iid: iid}, function (data) {

        }, "json")
    }

    //加点赞数
    function addSupporting(comid) {
        $.post("/photograph/photo/isAddSupp",{comid:comid},
            function (data) {
                if(!data.flag) {
                    $.post("/photograph/photo/addSupporting",{comid:comid},
                        function (data) {
                            location.reload()
                            // $("#countSupp").html(data)
                            // $("#supportBtn").attr("disabled","disabled");
                            // $("#nonsupportBtn").attr("disabled","disabled");
                            // $("#supportBtn").unbind()
                            // $("#support").html('<button id="supportBtn" disabled="disabled" onclick="addSupporting('+ data[i].comid +')" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"></path></svg> '+ data[i].support +'</button>\n')
                            // $("#nonsupportBtn").attr("disabled","disabled");
                        },"json")
                } else {
                    alert("您已经点过啦");
                }
        },"json")
    }

    //加踩点数
    function addNonSupporting(comid) {
        $.post("/photograph/photo/isAddNon",{comid:comid},
            function (data) {
                if(!data.flag) {
                    $.post("/photograph/photo/addNonSupporting",{comid:comid},
                        function (data) {
                            location.reload()
                        },"json")
                } else {
                    alert("您已经点过啦");
                }
            },"json")
    }
    //删除评论
    function deleteCom(comid,uid) {
        $.get("/photograph/user/findOne",
            function (data) {
                if (data.flag){
                    if(data.data.uid == uid) {
                        $.post("/photograph/photo/deleteComment",{comid:comid,uid:uid},
                            function (data) {
                                location.reload();
                            },"json")
                    }
                }else {
                    alert("请先登录");
                    location.href="/photograph/login.html";
                }

        },"json")

    }

    function favorite() {
        // 获得参数ii
        var iid = getParameter("iid");
        // 判断是否登录
        $.get("/photograph/user/findOne",
            function (data) {
                if (data.flag) { // 已登录
                    $.get("/photograph/photo/favorite", {iid: iid},
                        function (data) {
                            // 刷新页面
                            location.reload();
                        }, "json");
                } else { // 未登录
                    alert("请先登录");
                    location.href = "/photograph/login.html";
                }
            }, "json");
    }

    function cancelFavorite() {
        var iid = getParameter("iid");
        $.get("/photograph/photo/cancelFavorite", {iid: iid},
            function (data) {
                location.reload();
            }, "json");
    };

    function downloadfile() {
        // 获得参数iid
        var iid = getParameter("iid");
        // 判断是否登录
        $.get("/photograph/user/findOne",
            function (data) {
                if (data.flag) { // 已登录
                    $.post("/photograph/photo/downloadfile", {iid: iid},
                        function (data) {
                            // 刷新页面
                            // location.reload();
                        }, "json");
                } else { // 未登录
                    alert("请先登录");
                    location.href = "/photograph/login.html";
                }
            }, "json");
    }

    function search(iname) {
        // var iname = this.getAttribute("name");
        // var iname = iname.toString();
        $.post("/photograph/search/searchImg", {iname: iname},
            function (data) {
                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div = $("#relatedphotos");
                var divList = '';
                for (var i = 0; i < data.list.length; i++) {
                    var div = '<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data.list[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data.list[i].iname + '</h2>\n' +
                        '                    <a onclick="reading(' + data.list[i].iid + ')" href="photo-detail.html?iid=' + data.list[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data.list[i].idate + '</span>\n' +
                        '                <span>' + data.list[i].iclick + ' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList += div;
                }
                $div.html(divList);
                // 3.拼接页码
                var start = data.currentPage - 2;
                var end = data.currentPage + 2;
                if (start < 1) {
                    start = 1;
                    end = 5;
                }
                if (end > data.totalPage) {
                    end = data.totalPage;
                    start = end - 4;
                }
                if (data.totalPage < 5) {
                    start = 1;
                    end = data.totalPage;
                }


                $pageUl = $("#pageUl");

                var pageList = '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">';


                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                pageList += ' <a href="javascript:search(' + prePage + ')" class="btn btn-primary tm-btn-prev mb-2 ">Previous</a>\n';
                //页码
                pageList += '<div class="tm-paging d-flex">';
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {
                        pageList += '<a href="javascript:search(' + i + ');" class="active tm-paging-link">' + i + '</a>';
                    } else {
                        pageList += '<a href="javascript:search(' + i + ');" class="tm-paging-link">' + i + '</a>';
                    }
                }
                pageList += '</div>';
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '<a href="javascript:search(' + nextPage + ');" class="btn btn-primary tm-btn-next">Next Page</a>';
                pageList += '</div>';
                $pageUl.html(pageList);
            }, "json");
    }

    function addComment() {
        var iid = getParameter("iid")
        var comText = $("#commText").val()
        $.get("/photograph/user/findOne",function (data) {
            if (data.flag){
                $.post("/photograph/photo/addComment",{iid:iid,text:comText},
                    function (data) {
                        $("#commText").val('')
                        location.reload()
                    },"json")
            }else {
                alert("请先登录")
                location.href="/photograph/login.html";
            }
        },"json")

    }

    $(window).on("load", function () {
        $('body').addClass('loaded');
    });
</script>
</body>
</html>